<template>
    <div>
        <h-section title="研发流程信息" collapse>
            <flexbox class="cell-item" v-if="detail.pmpTestInformationDTO">
                <div class="cell-item-label">当前阶段：</div>
                <div class="font-w-b">{{ stage }}</div>
            </flexbox>
            <a-form layout="inline" ref="ruleFormRef" :model="form" v-else>
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="当前阶段" :span="24">
                            <div class="font-w-b">{{ stage }}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item label="测试报告" :span="24" name="files" :rules="ruleObj['测试报告']">
                            <file-cell :fileList="form.files" v-if="disabled" />
                            <upload-cell :fileParams="{ connectType: '测试报告', type: 1 }" :fileList="form.files" @valueChange="fileChange" v-else>
                                <template #extra>
                                    <span class="caption-font-color">提示：请上传自测报告</span>
                                    <a @click="downTemplate('testreport')">下载模板</a>
                                </template>
                            </upload-cell>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <slot name="processHistoryRecord" />
        </h-section>
    </div>
</template>

<script lang="ts">
import { FileCell, UploadCell } from '@/components';
import { validateFileValidator } from '@/utils/validator';
import { useDownFile } from '@/hooks/common/useFile';
import { defineComponent, ref, unref, computed, watch } from 'vue';
export default defineComponent({
    name: 'RequireTest',
    components: {
        UploadCell,
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        stage: { type: String, default: '' },
        disabled: { type: Boolean, default: false }
    },
    setup(props, { emit }) {
        const { downTemplate } = useDownFile();
        const ruleFormRef = ref<any>();
        const form = ref<any>({
            files: []
        });
        const ruleObj = computed(() => {
            const ruleObj = {
                测试报告: [{ required: true, message: '测试报告不能为空', validator: validateFileValidator, connectType: '测试报告', trigger: 'blur', type: 'array' }]
            };
            return props.disabled ? { 测试报告: {} } : ruleObj;
        });
        const handleSave = (type: number) => {
            emit('save', {
                type,
                query: {
                    ...unref(form)
                }
            });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            form.value.files = [...fileList];
            emit('save', {
                type: 6,
                query: {
                    ...unref(form)
                }
            });
        };
        const init = () => {
            const files = props.detail.files;
            if (files && files.length) {
                form.value.files = files.filter((item) => item.connectType === '测试报告');
            }
        };
        init();
        watch(
            () => props.detail.files,
            (n, o) => {
                // 如果最开始是禁用，则无需调用查询接口
                if (JSON.stringify(n) !== JSON.stringify(o)) {
                    init();
                }
            },
            {
                deep: true
            }
        );
        return {
            ruleFormRef,
            form,
            ruleObj,
            handleSave,
            fileChange,
            downTemplate
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/index.less';
</style>